<!doctype html>
<html>
<head>
	<title>意匠笔记</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=9">
	<meta name="format-detection" content="telephone=no">
	<meta name="HandheldFriendly" content="true"/>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<meta name="HandheldFriendly" content="true"/>
	<meta name="robots" content="noindex,nofollow"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
	<meta name="apple-mobile-web-app-title" content="意匠笔记">
	<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 user-scalable=0"/>
	<script src="bower_components/jquery/dist/jquery.min.js"></script>
	<script src="av-0.3.3.min.js"></script>
	<link rel="stylesheet" href="css/reset-mobile.min.css"/>
	<style>
		html {
			overflow: hidden;
			width: 100%;
			max-width: 100%;
			height: 100%;
			/*background-image: -webkit-gradient(radial, 123 238, 0, 188 32, 494, from(#8bd9c9), to(#a2c7eb));*/
			background: #1E85CA;
		}
		body {
			overflow: hidden;
		}
		#main {
			width: 100%;
			height: 100%;
			background: #919598;
			position: absolute;
			overflow-y: scroll;
			left: 0;
			top: 0;
		}
		#main header {
			width: 100%;
			height: 50px;
			background: #44AAE8;
			position: absolute;
			top: 0;
			left: 0;
		}
		#menu-show {
			width: 60px;
			height: 50px;
			position: absolute;
			border: 0;
			background: #44AAE8;
			color: white;
		}
		#main header h1 {
			font-size: 1.4em;
			line-height: 50px;
			text-align: center;
			color: white;
		}
		#main .tips-wrapper {
			margin: 54px auto;
		}
		#main .tip-container {
			-webkit-perspective: 1600px;
		}
		#main .tips {
			height: 100px;
			margin: 4px 16px 0;
			background: white;
			-webkit-transform-origin: 50% -4%;
			overflow: hidden;
		}
		#main footer {
			width: 100%;
			height: 50px;
			position: fixed;
			bottom: 0;
			left: 0;
			background: #44AAE8;
		}
		.shrink {
			-webkit-animation: shrink .3s;
		}
		#main.shrink-end {
			top: -5%;
			left: 55%;
			-webkit-transform:scale(.7, .7);
		}
		.expand {
			-webkit-animation: expand .3s;
		}
		.hold {
			-webkit-animation: hold .2s;
		}
		.hold-end {
			-webkit-transform: rotateX(-30deg);
		}
		.release {
			-webkit-animation: release .6s;
		}
		@-webkit-keyframes shrink {
			0% {-webkit-transform:scale(1, 1); top: 0; left: 0;}
			100% {-webkit-transform:scale(.7, .7); top: -5%; left: 55%;}
		}
		@-webkit-keyframes expand {
			0% {-webkit-transform:scale(.7, .7); top: -5%; left: 55%;}
			100% {-webkit-transform:scale(1, 1); top: 0; left: 0;}
		}
		@-webkit-keyframes hold {
			0% {-webkit-transform: rotateX(0);}
			100% {-webkit-transform: rotateX(-30deg);}
		}
		@-webkit-keyframes release {
			0% {-webkit-transform: rotateX(-30deg);}
			50% {-webkit-transform: rotateX(20deg);}
			80% {-webkit-transform: rotateX(-10deg);}
			100% {-webkit-transform: rotateX(0);}
		}
		.write-wrapper {
			height: 80%;
			margin: 54px 4px;
			padding: 10px;
			background: white;
		}
		.send-tit {
			width: 100%;
			border: 0;
			border-bottom: 2px solid #E8ECED;
			line-height: 1.5em;
		}
		.send-date {
			color: #A9A9A9;
			font-size: .9em;
			margin: 2px 0 0 0;
		}
		#send-content {
			border: 0;
			border-top: 2px solid #E8ECED;
			width: 100%;
			height: 10em;
			margin: 10px 0 0 0;
			padding: 2px;
		}
		.btn-cancel,
		.btn-send,
		.btn-write {
			color: white;
			line-height: 50px;
		}
		.btn-write {
			width: 5em;
			margin: 0 auto;
		}
		.btn-cancel {
			float: left;
			margin-left: 10px;
		}
		.btn-send {
			float: right;
			margin-right: 10px;
		}
		.tip-hd {
			background: coral;
			width: 24px;
			height: 100%;
			float: left;
		}
		.tip-tit {
			border-bottom: 2px solid #E8ECED;
			font-weight: bold;
			padding: 6px 2px 2px 2px;
			text-indent: 8px;
			color: #1D2124;
		}
		.tip-content {
			padding: 6px 2px 0 2px;
			margin-left: 30px;
			color: #494E51;
		}
	</style>
</head>
<body>
<div class="menu">
	123
	<div class="btn-login">登录</div>
	<div class="btn-reg">注册</div>
</div>
<div id="main">
	<header>
		<button id="menu-show">三</button>
		<h1>意匠笔记</h1>
	</header>
	<div class="tips-wrapper">
		<div class="tip-container">
			<div class="tips">
				<div class="tip-hd"></div>
				<div class="tip-tit">测试标题</div>
				<div class="tip-content">吃饭睡觉打豆豆、吃饭睡觉打豆豆、吃饭睡觉打豆豆、吃饭睡觉打豆豆、吃饭睡觉打豆豆、吃饭睡觉打豆豆、吃饭睡觉打豆豆、吃饭睡觉打豆豆、吃饭睡觉打豆豆、吃饭睡觉打豆豆、吃饭睡觉打豆豆、吃饭睡觉打豆豆、吃饭睡觉打豆豆、吃饭睡觉打豆豆、吃饭睡觉打豆豆、吃饭睡觉打豆豆、吃饭睡觉打豆豆、吃饭睡觉打豆豆、吃饭睡觉打豆豆、吃饭睡觉打豆豆、吃饭睡觉打豆豆、吃饭睡觉打豆豆、吃饭睡觉打豆豆、吃饭睡觉打豆豆、吃饭睡觉打豆豆</div>
			</div>
		</div>
	</div>
	<div class="write-wrapper">
		<input class="send-tit" type="text" placeholder="标题"/>
		<div class="send-date">5月26日 星期一</div>
		<textarea name="send-content" id="send-content" placeholder="在此输入记录..."></textarea>
	</div>
	<footer>
		<div class="btn-write">发</div>
		<div class="btn-cancel">否</div>
		<div class="btn-send">是</div>
	</footer>
</div>
<script>
	var shrinkExpand = 0;
	$(function () {
		AV.initialize("jb4n8slmgt2cyqyrv6ahg92jlntc20k1gqqntfvzqtqsebf3", "e5z9ye6fdydhjaqdqt1w5uf1g9i3mpk0wk8ah2ohp5irbdji");
		// 初始化 param1：应用 id、param2：应用 key
		var Memo = AV.Object.extend('Memo');
		loadTips();
		watchMode();
		bindEvents();
		$('.btn-write').on('click', function () {
			writeMode();
		});
		$('.btn-cancel').on('click', function () {
			watchMode();
		});
		$('.btn-send').on('click', function () {
			if($('#send-content').val() == '') {
				alert('空内容');
			} else {
				if($('.send-tit').val() == '') {
					$('.send-tit').val('&nbsp;');
				}
				var memo = new Memo();
				memo.save({
					title: $('.send-tit').val(),
					content: $('#send-content').val()
				}, {
					success: function () {
						insertTips($('.send-tit').val(), $('#send-content').val());
						$('.send-tit').val('');
						$('#send-content').val('');
						watchMode();
					}
				})
			}
		});
		$(window).on('touchmove', function (e) {
			e.preventDefault();
		});
		$('#main').on('touchmove', function (e) {
			e.stopPropagation();
		});
		$('#menu-show').click(function () {
			$('#main').scrollTop(0);
			if(shrinkExpand) {
				$('#main').addClass('expand').removeClass('shrink').removeClass('shrink-end');
				shrinkExpand = 0;
				$('#main').off('touchmove').on('touchmove', function (e) {
					e.stopPropagation();
				});
			} else {
				$('#main').addClass('shrink').removeClass('expand').addClass('shrink-end');
				shrinkExpand = 1;
				$('#main').on('touchmove', function (e) {
					e.preventDefault();
				});
			}
		});
		function loadTips () {
			var query = new AV.Query(Memo);
			query.find({
				success: function (data) {
					for(var i = 0; i < data.length; i++) {
						insertTips(data[i].get('title'), data[i].get('content'));
					}
				}
			})
		}
		function insertTips (title, content) {
			$('.tips-wrapper').append('<div class="tip-container"><div class="tips"><div class="tip-hd"></div><div class="tip-tit">' + title + '</div><div class="tip-content">' + content + '</div></div></div>');
			bindEvents();
		}
		function bindEvents () {
			$('div.tips').on('touchmove', function (e) {
				$(this).removeClass('release').addClass('hold').addClass('hold-end');
				$(this).parent().siblings().children().removeClass('release');
			});
			$('div.tips').on('touchend', function (e) {
				$(this).removeClass('hold').removeClass('hold-end').addClass('release');
				var that = this;
				var t = setTimeout(function () {
					$(that).parent().siblings().children().addClass('release');
				}, 100);
			});
		}
		function writeMode () {
			$('.btn-write').hide();
			$('.tips-wrapper').hide();
			$('.btn-cancel').show();
			$('.btn-send').show();
			$('.write-wrapper').show();
		}
		function watchMode () {
			$('.btn-write').show();
			$('.tips-wrapper').show();
			$('.btn-cancel').hide();
			$('.btn-send').hide();
			$('.write-wrapper').hide();
			$('div.tips').trigger('touchend');
		}
	});
</script>
</body>
</html>
